<template>
  <transition
    name="slide-fade"
    appear
    @after-leave="afterLeave"
  >
    <div class="message-box alert-box animated" v-if="show">
      <article :class="['message', type ? `is-${type}` : '']">
        <div class="message-header">
          <div class="message-title"> 
            <span class="icon" v-if="icon">
              <i :class="['fa', `fa-${icon}`]"></i>
            </span>
            {{ title }}
          </div>
          <button class="delete touchable" @click="close()" v-if="showCloseButton"></button>
        </div>
        <div class="message-body" v-if="message">{{ message }}</div>
      </article>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
export default {
  props: {
    type: String,
    title: String,
    message: String,
    direction: {
      type: String,
      default: 'Down'
    },
    duration: {
      type: Number,
      default: 1500
    },
    container: {
      type: String,
      default: '.alerts'
    },
    showCloseButton: Boolean
  },
  data () {
    return {
      $_parent_: null,
      icons: {
        normal: '',
        primary: 'arrow-circle-right',
        info: 'info-circle',
        success: 'check-circle',
        warning: 'exclamation-circle',
        danger: 'times-circle'
      },
      show: true
    }
  },
  created () {
    let $parent = this.$parent
    if (!$parent) {
      let parent = document.querySelector(this.container)
      if (!parent) {
        // Lazy creating `div.notifications` container.
        const className = this.container.replace('.', '')
        const Alerts = Vue.extend({
          name: 'Alerts',
          render (h) {
            return h('div', {
              'class': {
                [`${className}`]: true
              }
            })
          }
        })
        $parent = new Alerts().$mount()
        document.body.appendChild($parent.$el)
      } else {
        $parent = parent.__vue__
      }
      // Hacked.
      this.$_parent_ = $parent
    }
  },
  mounted () {
    if (this.$_parent_) {
      this.$_parent_.$el.appendChild(this.$el)
      this.$parent = this.$_parent_
      delete this.$_parent_
    }
    if (this.duration > 0) {
      this.timer = setTimeout(() => this.close(), this.duration)
    }
  },
  destroyed () {
    this.$el.remove()
  },
  computed: {
    icon () {
      return this.icons[this.type]
    }
  },
  methods: {
    close () {
      clearTimeout(this.timer)
      this.show = false
    },
    afterLeave () {
      this.$destroy()
    }
  }
}
</script>

<style lang="scss">
.alerts {
  position: fixed;
  top: 15px;
  left: 0;
  width: 100%;
  z-index: 1024 + 234;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  .alert-box {
    min-width: 200px;
    position: absolute;
    right: 5%;
    // left: 50%;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    pointer-events: all;
  }
  .alert {
    position: relative;
    right: 50%;
    .delete {
      float: right;
    }
    .icon {
      vertical-align: middle;
    }
  }
}
.message-header{
  justify-content: space-between;
}
.message-title{
  display: flex;
  align-items: center;
}
.message.is-primary{
  .message-header{
    background-color: #15b6e4;
  }
  .message-body {
    border-color: #15b6e4;
  }
}
</style>
